<template>
	<view class="container bg-white" :class="'wp-'+platform">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="head bg-white">
			<view class="cover">
				<video id="myVideo" :autoplay="autoplay" show-mute-btn="true" @timeupdate="timeUpdate" :title="data.title" :src="playurls[playmode]" :poster="data.section.cover" :initial-time="initialtime"></video>
				<view class="flex padding-lr justify-between margin-top-xs">
					<view class="text-gray">视频时长：{{data.section.duration || '未知'}}</view>
					<view class="text-sm">
						<view class="cu-tag" :class="playmode=='no'?'bg-red':'line-red'" @click="playmode='no'">原画</view>
						<view class="cu-tag" v-if="playurls.hd!=''" :class="playmode=='hd'?'bg-red':'line-red'" @click="playmode='hd'">高清</view>
						<view class="cu-tag" v-if="playurls.sd!=''" :class="playmode=='sd'?'bg-red':'line-red'" @click="playmode='sd'">标清</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-gray">
			<view class="padding-xs bg-white" v-if="data.lesson.id>0">
				<lessons :lessons="lessons" :showempty="false"></lessons>
				<view class="goods" v-if="data.lesson.goods.switch>0">
					<view class="cu-bar">
						<view class="action title-style-3">
							<text class="text-lg text-bold text-black">课程相关商品</text>
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item noaf" @click="naviTo(data.lesson.goods.url)">
							<view class="cu-avatar lg" :style="'background-image:url('+data.lesson.goods.cover+');'"></view>
							<view class="content">
								<view class="text-black text-cut">{{data.lesson.goods.title}}</view>
								<view class="text-gray text-sm flex">
									<view class="text-cut">
										{{data.lesson.goods.summary}}
									</view>
								</view>
							</view>
							<view class="action">
								<button class="cu-btn bg-gradual-yellow sm round">购买</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white margin-top-sm padding-bottom">
				<view class="cu-bar border-bottom">
					<view class="action title-style-3">
						<text class="text-lg text-bold text-black">大家说</text>
					</view>
					<view class="action">
						<button class="cu-btn bg-gradual-yellow sm round" @click="docomment">我来评论</button>
					</view>
				</view>
				<view class="padding-xl text-gray text-center" v-if="data.comments.length==0">评论区空空如也，快去抢沙发吧~</view>
				<view class="comments mini padding-bottom margin-top" v-else>
					<view class="cu-list menu-avatar padding-left-sm" v-for="(item, index) in data.comments" :key="index">
						<view class="cu-item noaf">
							<view class="cu-avatar round" :style="'background-image:url('+item.avatar+');'"></view>
							<view class="content">
								<view class="text-black">
									{{item.name}}
									<text class="cuIcon-delete text-red margin-left" @click="removeComment(item.id)" v-if="userId==item.uid"></text>
								</view>
							</view>
							<view class="action">
								<view class="text-grey text-xs">{{item.createtime}}</view>
							</view>
						</view>
						<view class="summary">{{item.content}}</view>
					</view>
					<view class="text-center padding margin-top" @click="loadComment(commentpage+1)" v-if="commentviewmore">
						<view class="text-yellow">查看更多</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="showmodal=='comment'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-grey" @tap="showmodal=''">取消</view>
					<view class="action text-blue" @tap="submitComment">发表</view>
				</view>
				<view class="border-top padding-sm bg-white">
					<view class="cu-form-group bg-gray radius">
						<textarea maxlength="-1" v-model="comment.content" placeholder="据说友爱发言的人运气都不会太差~"></textarea>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import core from "@/static/core.js"
	import lessons from "@/components/util/lessons.vue"
	
	export default {
		components: {lessons},
		computed: mapState(['userId', 'hasLogin', 'userName', 'lectorid']),
		data() {
			return {
				id:0,
				sectionid:0,
				sectioncontent:"",
				platform:'h5',
				player:null,
				lessons:[],
				playing:false,
				initialtime : 0,
				currentTime:0,
				commentpage:1,
				commentviewmore:true,
				showmodal:'',
				comment:{
					score:0,
					cid:0,
					content:""
				},
				autoplay:false,
				playmode:'no',
				playurls:{
					'no':'',
					'hd':'',
					'sd':''
				},
				data:{
					"title": "课程章节",
					"playset":{
						autoplay:1,
						playmode:'no'
					},
					"section": {
						"id": 0,
						"uniacid": 0,
						"lid": 0,
						"type": 0,
						"title": "",
						"cover": "",
						"videourl": "",
						"videohd": "",
						"videosd": "",
						"duration": "",
						"content": "",
						"pics": "",
						"views": 0,
						"displayorder": 0,
						"status": 0,
						"dateline": 0,
						"addtime": 0
					},
					"lesson": {
						"id": 0
					},
					"log": {
						"id": 0
					},
					"comments":[]
					
				}
			}
		},
		onLoad(options){
			console.log(options)
			if(!this.hasLogin) return core.toast('请先登录','login');
			//if(typeof(options.id)=='undefined') return core.toast('参数错误：课程编号异常','back');
			if(typeof(options.sid)=='undefined') return core.toast('参数错误：章节编号异常','back');
			this.platform = core.platform;
			if(typeof(options.id)!='undefined'){
				this.id = options.id;
			}
			this.sectionid = options.sid;
			var that = this;
			this.initData();
			(this.$api.reqGet({
				url:"menu/selLog/"+core.userinfo.uid+"/"+parseInt(this.id)
			}).then(res=>{
				console.log(res)
				if(res.code==200){
					this.data.log=res.data;
					that.commentviewmore = false;
					console.log(this.data.log)
					that.initialtime = res.data.timeline;
				}
			}));
			(this.$api.reqGet({
				url:"menu/addNum/"+this.sectionid+"/"+this.id+"/"+core.userinfo.uid
			}).then(res=>{
				console.log(res)
			}))
			
			// this.initData('lesson/section',{id:this.id, sid:this.sectionid},function(res){
			// 	if(res.comments.length<15){
			// 		that.commentviewmore = false;
			// 	}
			// 	if(res.section.type==2){
			// 		that.sectioncontent = res.section.content;
			// 	}else{
			// 		if(res.log.id>0){
			// 			that.initialtime = res.log.timeline;
			// 		}
			// 	}
			// 	if(res.lesson.id>0){
			// 		that.lessons[0] = res.lesson;
			// 	}
			// });
		},
		onReady(res) {
			// #ifndef MP-ALIPAY
			this.player = uni.createVideoContext('myVideo')
			// #endif
		},
		onHide() {
			if(this.player){
				this.player.pause();
			}
		},
		onUnload(){
			console.log({sid:parseInt(this.sectionid),aid:parseInt(this.id),timeline:this.currentTime,uid:core.userinfo.uid})
			if(/*this.data.section.type!=2 &&*/ this.id>0){
				if(this.currentTime>0 && this.currentTime!=this.initialtime){
					// core.post('lesson/updatelog',function(res){},{id:this.data.lesson.id,sid:this.data.section.id,timeline:this.currentTime});
					(this.$api.reqPost({
						url:"menu/addLog",
						data:{sid:parseInt(this.sectionid),aid:parseInt(this.id),timeline:this.currentTime,uid:core.userinfo.uid}
					}).then(res=>{
						console.log(res)
					}))
				}
			}
		},
		onPullDownRefresh(){
			var that = this;
			this.initData('lesson/section',{id:this.id, sid:this.sectionid},function(res){
				that.commentpage = 1;
				if(res.comments.length<15){
					that.commentviewmore = false;
				}else{
					that.commentviewmore = true;
				}
				if(res.section.type==2){
					that.sectioncontent = res.section.content;
				}else{
					if(res.log.id>0){
						that.initialtime = res.log.timeline;
					}
				}
				if(res.lesson.id>0){
					that.lessons[0] = res.lesson;
				}
			});
			uni.stopPullDownRefresh();
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				// core.get(route,function(res){
				// 	// if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
				// 	// 	return core.report(res, true);
				// 	// }
				// 	that.autoplay = res.playset.autoplay==1 ? true : false;
				// 	that.data = res;
				// 	if(res.section.type<2){
				// 		that.playurls = {
				// 			'no':res.section.videourl,
				// 			'hd':res.section.videohd,
				// 			'sd':res.section.videosd
				// 		};
				// 		if(res.playset.playmode=='sd'){
				// 			if(that.playurls.sd!=''){
				// 				that.playmode = 'sd'
				// 			}else{
				// 				res.playset.playmode = 'hd';
				// 			}
				// 		}
				// 		if(res.playset.playmode=='hd' && that.playurls.hd!='') that.playmode = 'hd';
				// 	}
				// 	uni.setNavigationBarTitle({
				// 		title:res.title
				// 	});
				// 	if(callback){
				// 		callback(res);
				// 	}
				// },data);
				this.infoCourse();
				this.infoComments();
			},
			async infoComments(){
				console.log(parseInt(this.id)+"/"+('section'+this.sectionid))
				var that=this;
				/**
				 * 根据被评论id和评论类型  查询评论
				 */
				(await this.$api.reqGet({
					url:"comments/selByAid/"+parseInt(this.id)+"/"+('section'+this.sectionid)
				}).then(res=>{
					console.log(res)
					if(res.code==200){
						that.data.comments=res.data;
					}else{
						that.data.comments=[]
					}
				}));
			},
			async infoCourse(){
				var that=this;
				(await this.$api.reqGet({
					url:"menu/selByCourseId/"+this.id
				}).then(res=>{
					console.log(res)
					if(res.code==200){
						console.log(this.sectionid)
						for(var i=0;i<res.data.length;i++){
							if(this.sectionid==(i+1)){
								uni.setNavigationBarTitle({
									title:res.data[i].title
								});
								console.log(res)
								that.playurls = {
									'no':res.data[i].imgandvideourl,
									'hd':res.data[i].imgandvideourl,
									'sd':res.data[i].imgandvideourl
								};
								console.log(that.playurls)
							}
						}
					}
				}))
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			docomment(){
				if(this.player){
					this.player.pause();
				}
				this.showmodal = 'comment';
			},
			timeUpdate(e){
				var currentTime = Math.floor(e.detail.currentTime);
				if(currentTime!=this.currentTime){
					this.currentTime = currentTime;
					//console.log(currentTime);
				}
			},
			async submitComment(){
				if(this.comment.content=='') return core.toast('请输入您的评价内容');
				var postdata = this.comment;
				postdata.type = 'section'+this.sectionid;
				postdata.aid = parseInt(this.id);
				postdata.uid=core.userinfo.uid;
				var that = this;
				(await this.$api.reqPost({
					url:"comments/addComments",
					data:postdata
				}).then(res=>{
					console.log(res)
					if(res.code==200){
						that.showmodal = '';
						that.comment.content = '';
						core.toast('评论成功','','success');
						that.infoComments();
					}
				}))
				// return core.post('comment/post',function(res){
				// 	if(res.type!='success') return core.toast(res.message);
				// 	core.toast(res.message,'','success');
				// 	that.showmodal = '';
				// 	that.comment.content = '';
				// 	that.loadComment(1);
				// },{data:postdata});
			},
			loadComment(page=1){
				var that = this;
				return core.get('comment',function(res){
					that.commentpage = page;
					if(res.list.length<15){
						that.commentviewmore = false;
					}else{
						that.commentviewmore = true;
					}
					if(page==1){
						that.data.comments = res.list;
					}else{
						if(res.list.length==0) return that.commentviewmore=false,core.toast('没有更多了~');
						that.data.comments = that.data.comments.concat(res.list)
					}
				},{type:'section',aid:this.data.section.id,cid:0,page:page});
			},
			removeComment(cid=0){
				if(!cid) return core.toast('参数异常：无效的评论编号');
				var that = this;
				return core.confirm('删除后不可恢复，是否确定要删除？','删除评价',function(){
					(that.$api.reqGet({
						url:"comments/deById/"+cid
					}).then(res=>{
						console.log(res);
						if(res.code==200){
							that.infoComments();
						}
					}))
					
					// core.get('comment/remove',function(res){
					// 	if(res.type!='success') return core.report(res);
					// 	that.loadComment(1);
					// },{cid:cid});
				});
			}
		}
	}
</script>

<style>
	page{background: #FFFFFF;}
	.wp-app .cu-modal{z-index: 100001;}
</style>
